{% extends "base.html" %}

{% block title %}{{ block.super }} - Season{% endblock %}
{% block head %}{{ block.super }}
<style>
<!--
body {
    margin: 0;
}

h1 {
    margin-top: 0px;
}

#content {
    height: 520px;
    margin: auto;
    position: relative;
    width: 1370px;
    text-align:center;
}

.serie_div {
    padding-top: 10px;
    height: 180px;
    position: absolute;
    width: 670px;
    border: thin dotted;
    border-color: #001100;
}

#serie_a {
    top: 80px
}

#serie_b {
    top: 80px;
    left: 700px;
}

#serie_c {
    top: 280px;
}

#serie_d {
    left: 700px;
    top: 280px;
}

#round {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0px;
}

#season_footer {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 500px;
}

table {
    margin: 0 auto;
}

table, th, td {
    border: 0px solid grey; 
}

tr.team {
    width: 150px;
}
-->
</style>
{% endblock %}
{% block contents %}
<div id="content">
    <div id="round"><h1>Rodada {{ game_round.round_number }}<div id="timer">{{ current_time }}</div></h1></div>
    <div id="serie_a" class="serie_div">
        <h1 align="center">PRIMEIRA DIVIS&Atilde;O</h1>
        <table>
	        {% for m in matches_serie_a %}
	        <tr>
                <td style ="width:150px;border-style:none;font-size:8pt;color:{% ifequal m.last_goal_assigned_a "nobody" %}green{% else %}white{% endifequal %}" id="goala{{m.pk}}" align="right">{{m.last_goal_assigned_a}}</td>
		        <td  style="width:150px;border-color:{{m.team_a.base_team.color3}}" bgcolor={{m.team_a.base_team.color1}} align="right"><font color={{m.team_a.base_team.color2}}><b>{{m.team_a.base_team.name}}{% ifequal m.team_a.pk my_team.pk %} ***{% endifequal %} </b></font></td>
		        <td style="border-style:none" id="{{m.pk}}">{{ m.goals_a }} x {{ m.goals_b }}</td>
		        <td  style="width:150px;border-color:{{m.team_b.base_team.color3}}" bgcolor={{m.team_b.base_team.color1}} align="left"><font color={{m.team_b.base_team.color2}}><b>{{m.team_b.base_team.name}}{% ifequal m.team_b.pk my_team.pk %} ***{% endifequal %}</b></font></td>
                <td style ="width:150px;border-style:none;font-size:8pt;color:{% ifequal m.last_goal_assigned_b "nobody" %}green{% else %}white{% endifequal %}" id="goalb{{m.pk}}" align="left">{{m.last_goal_assigned_b}}</td>
	        </tr>
	        {% endfor %}
        </table>
    </div>
    
    <div id="serie_b" class="serie_div">
        <h1 align="center">SEGUNDA DIVIS&Atilde;O</h1>
        <table>
	        {% for m in matches_serie_b %}
	        <tr>
                <td style ="width:150px;border-style:none;font-size:8pt;color:{% ifequal m.last_goal_assigned_a "nobody" %}green{% else %}white{% endifequal %}" id="goala{{m.pk}}" align="right">{{m.last_goal_assigned_a}}</td>
	            <td  style="width:150px;border-color:{{m.team_a.base_team.color3}}" bgcolor={{m.team_a.base_team.color1}} align="right"><font color={{m.team_a.base_team.color2}}><b>{{m.team_a.base_team.name}}{% ifequal m.team_a.pk my_team.pk %} ***{% endifequal %}</b></font></td>
	            <td style="border-style:none" id="{{m.pk}}">{{ m.goals_a }} x {{ m.goals_b }}</td>
	            <td  style="width:150px;border-color:{{m.team_b.base_team.color3}}" bgcolor={{m.team_b.base_team.color1}} align="left"><font color={{m.team_b.base_team.color2}}><b>{{m.team_b.base_team.name}}{% ifequal m.team_b.pk my_team.pk %} ***{% endifequal %}</b></font></td>
                <td style ="width:150px;border-style:none;font-size:8pt;color:{% ifequal m.last_goal_assigned_b "nobody" %}green{% else %}white{% endifequal %}" id="goalb{{m.pk}}" align="left">{{m.last_goal_assigned_b}}</td>
	        </tr>
	        {% endfor %}
        </table>
    </div>
    
    <div id="serie_c" class="serie_div">
        <h1 align="center">TERCEIRA DIVIS&Atilde;O</h1>
        <table>
	        {% for m in matches_serie_c %}
	        <tr>
                <td style ="width:150px;border-style:none;font-size:8pt;color:{% ifequal m.last_goal_assigned_a "nobody" %}green{% else %}white{% endifequal %}" id="goala{{m.pk}}" align="right">{{m.last_goal_assigned_a}}</td>
	            <td  style="width:150px;border-color:{{m.team_a.base_team.color3}}" bgcolor={{m.team_a.base_team.color1}} align="right"><font color={{m.team_a.base_team.color2}}><b>{{m.team_a.base_team.name}}{% ifequal m.team_a.pk my_team.pk %} ***{% endifequal %}</b></font></td>
	            <td style="border-style:none" id="{{m.pk}}">{{ m.goals_a }} x {{ m.goals_b }}</td>
	            <td  style="width:150px;border-color:{{m.team_b.base_team.color3}}" bgcolor={{m.team_b.base_team.color1}} align="left"><font color={{m.team_b.base_team.color2}}><b>{{m.team_b.base_team.name}}{% ifequal m.team_b.pk my_team.pk %} ***{% endifequal %}</b></font></td>
                <td style ="width:150px;border-style:none;font-size:8pt;color:{% ifequal m.last_goal_assigned_b "nobody" %}green{% else %}white{% endifequal %}" id="goalb{{m.pk}}" align="left">{{m.last_goal_assigned_b}}</td>
	        </tr>
	        {% endfor %}
        </table>
    </div>
    
    <div id="serie_d" class="serie_div">
        <h1 align="center">QUARTA DIVIS&Atilde;O</h1>
        <table>
	        {% for m in matches_serie_d %}
	        <tr>
                <td style ="width:150px;border-style:none;font-size:8pt;color:{% ifequal m.last_goal_assigned_a "nobody" %}green{% else %}white{% endifequal %}" id="goala{{m.pk}}" align="right">{{m.last_goal_assigned_a}}</td>
	            <td  style="width:150px;border-color:{{m.team_a.base_team.color3}}" bgcolor={{m.team_a.base_team.color1}} align="right"><font color={{m.team_a.base_team.color2}}><b>{{m.team_a.base_team.name}}{% ifequal m.team_a.pk my_team.pk %} ***{% endifequal %}</b></font></td>
	            <td style="border-style:none" id="{{m.pk}}">{{ m.goals_a }} x {{ m.goals_b }}</td>
	            <td  style="width:150px;border-color:{{m.team_b.base_team.color3}}" bgcolor={{m.team_b.base_team.color1}} align="left"><font color={{m.team_b.base_team.color2}}><b>{{m.team_b.base_team.name}}{% ifequal m.team_b.pk my_team.pk %} ***{% endifequal %}</b></font></td>
                <td style ="width:150px;border-style:none;font-size:8pt;color:{% ifequal m.last_goal_assigned_b "nobody" %}green{% else %}white{% endifequal %}" id="goalb{{m.pk}}" align="left">{{m.last_goal_assigned_b}}</td>
	        </tr>
	        {% endfor %}
        </table>
    </div>
    <div id="season_footer" style="visibility: hidden;">
           <a href="/game/season">Voltar Para Temporada</a>
    </div>
</div>
<script type="text/javascript">
<!--
function isEmpty(obj) { 
	for(var i in obj) { 
		return false; 
	} 
	
	return true; 
}

function setCronometer(time) {
    var strTime = "";
    if(time < 10) {
        strTime += "0";
    }
    strTime += time;
    strTime += ":00";
    
    $("#timer").text(strTime);
}

function setMatches(matches,time) {
	// funcional call
	jQuery.each(matches, function(i, value) {

		var name = "#" + value.pk;
		var score = value.fields.goals_a + " x " + value.fields.goals_b;
		var name_goal_a = "#goala" + value.pk;
		var goal_a = value.fields.last_goal_assigned_a;
		var name_goal_b = "#goalb" + value.pk;
		var goal_b = value.fields.last_goal_assigned_b;
		var currentGoal_a = $(name_goal_a).text()
		var currentGoal_b = $(name_goal_b).text()
		var currentScore = $(name).text()
		
		if(score != currentScore) {
			$(name).effect("pulsate", {times: 5}, 1000);
		}
		$(name).text(score);

		if(goal_a != currentGoal_a && goal_a != "nobody") {
    		$(name_goal_a).text(goal_a);
            $(name_goal_a).css("color","white");
			$(name_goal_a).effect("pulsate", {times: 5}, 1000);
		}
		if(goal_b != currentGoal_b && goal_b != "nobody") {
    		$(name_goal_b).text(goal_b);
            $(name_goal_b).css("color","white");
			$(name_goal_b).effect("pulsate", {times: 5}, 1000);
		}

	});
}

function runRoundStep() {
	$.getJSON("/game/play_round_step/", function(data) {
		
		if(isEmpty(data)) {
			// End of match or error.
			$("#season_footer").css("visibility", "visible");
		} else {
			setCronometer(data.cronometer);
			setMatches(data.matches,data.cronometer);
			setTimeout(runRoundStep, 1000);		
		}
	});
}

$().ready(function() {
	setTimeout(runRoundStep, 1000);
});
//-->
</script>
{% endblock contents %}
